<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据库表单创建</title>
    <script src="../../static/js/vue.js"></script>

</head>
<body>


<div id="app">
    <div v-show="!list.length">待办空空如也</div>
    <ul>
        <input type="text" v-model="mytext">
        <button type="submit" @click="add(mytext)">add</button>
        <li v-for="(data, index) in list"  v-show="list.length">
            {{ data }}
            <button @click="del(index)">del</button>
        </li>
    </ul>
</div>


<script>
    new Vue
    (
        {
            el: '#app',
            data:
                {
                    list: [],
                    mytext: ''
                },
            methods:
                {
                    add(value)
                    {
                        this.list.push(value)
                        this.mytext = ''
                    },

                    del(index)
                    {
                        this.list.splice(index, 1)
                    }
                }
        }

    )
</script>

</body>
</html>